<template>
  <div class="tree_container">
    <div class="search">
      <van-field
        v-model="searchValue"
        placeholder="可输入部门或姓名查询"
        clearable
        @update:model-value="onSearch(searchValue)"
        @clear="onSearch(searchValue)"
      />
    </div>
    <vxe-tree
      ref="treeRef"
      :data="userList"
      :check="currentStrategy"
      @check-change="checkChange"
      check
    ></vxe-tree>
    <div class="checked_container">
      <div class="label">已选择：</div>
      <div class="checked_list">
        <div
          class="item"
          v-for="(item, index) in checkList"
          :key="item.id"
          @click="itemClick(item)"
        >
          <img :src="item.img" alt="" />
          <div class="name">{{ item.label }}</div>
        </div>
      </div>
      <div class="button">
        <van-button type="success" size="small" @click="userConfirm()"
          >确定</van-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { getDeptTree } from "@/api/index";
const emit = defineEmits(["submitUser"]);
const props = defineProps({
  list: Array,
});
const treeRef = ref();
const searchValue = ref("");
onMounted(() => {
  getUserByName();
});
// 人员列表
const userList = ref([]);
const checkList = ref([]);
checkList.value = props.list;

// 获取人员列表
const getUserByName = async () => {
  const { data } = await getDeptTree();
  userList.value = data;
  userList.value.forEach((item) => {
    loopHandle(item);
  });
  if (checkList.value.length) {
    let checkTemp = checkList.value.map((item) => {
      return {
        checked: true,
        children: null,
        id: item.userId,
        img: item.img,
        isDept: false,
        label: item.userName,
      };
    });
    checkTemp.forEach((item) => {
      nextTick(() => {
        treeRef.value.treeFactory.checkNode(item, "checked", true);
        let self = treeRef.value.treeFactory.searchTree(item.label, { isFilter: false });
        let parent = treeRef.value.treeFactory.getParent(self)
        treeRef.value.treeFactory.expandNode(parent);//展开父节点
      });
    });
  }
};
const currentStrategy = ref("both");
//过滤
const onSearch = (value) => {
  treeRef.value.treeFactory.searchTree(value, { isFilter: false });
};

//初始化选中状态
const loopHandle = (obj) => {
  if (obj) {
    obj["checked"] = false;
    if (obj.children) {
      obj.children.forEach((item) => {
        loopHandle(item);
      });
    }
  }
};

//多选操作
const checkChange = (node) => {
  console.log("checkChange node:", node);
  nextTick(() => {
    checkList.value = treeRef.value.treeFactory
      .getCheckedNodes()
      .filter((item) => {
        return item.isDept == false;
      });
  });
};
const itemClick = (val) => {
  onSearch(val.label);
};
//设置人员
const userConfirm = () => {
  emit("submitUser", checkList.value);
};
</script>
<style lang="scss" scoped>
.tree_container {
  width: 100%;
  height: 600px;
  padding: 0.5rem;
  box-sizing: border-box;
  overflow-y: scroll;
  .vxe-tree {
    height: 12rem;
    overflow-y: scroll;
  }
  .checked_container {
    padding: 10px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .checked_list {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 0 0.5rem;
      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 5px;
        img {
          width: 20px;
          height: 20px;
          border-radius: 5px;
        }
        .name {
          font-size: 0.2rem;
        }
      }
    }
  }
}
</style>
